<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 练习</title>
    <link rel="stylesheet" href="../public/css/main.css">
    <link rel="stylesheet" href="../02/css/another.css">
    <style>
        h2 {
            border-bottom: 2px solid rgb(226, 226, 225);
            padding-bottom: 0.5em;
        }

        .gold {
            color: gold;
        }

        #dazai {
            color: saddlebrown;
        }

        a {
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        li:nth-child(3) {
            background-color: cornsilk;
        }

        #pseudo::first-letter {
            color: rgb(226, 167, 4);
            font-size: 1.2em;

        }

        ol ol li {
            color: salmon;
        }

        h1,
        h2,
        h3,
        h4,
        h5 {
            font-family: 微软雅黑;
        }
    </style>
</head>

<body>

    <header>
        <h1>CSS 练习</h1>
    </header>
    <main>
        <section>
            <h2 style="color: indianred;">你最爱的文豪野犬cp是</h2>
            <h2 contenteditable>哒宰&chuya双黑！</h2>
            <ol>
                <li>哒宰桑~</li>
                <li>chuya君~</li>
                <li style="color: brown;">（倒地身亡的我❥）</li>
                <p><img src="../public/images/-5c75b2c941d73f6c.gif" alt="哒宰帅帅！" width="200px" height="120px">

                </p>
            </ol>
        </section>
        <section>
            <h2>CHOOSE 双黑 </h2>
            <ol>
                <li>简单·双黑</li>

                <ol>
                    <li class=>属性哒宰</li>
                    <li class="gold">类哒宰</li>
                    <li id=dazai>ID 哒宰</li>
                    <li> <a href="#">伪类哒宰</a></li>

                </ol>
                <li>群组哒宰</li>
                <li id="pseudo">伪元素哒宰</li>
                <li>组合哒宰</li>
                <ol>
                    <li>后代双黑：敦敦和芥芥</li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ol>
            </ol>
        </section>
    </main>
    <footer></footer>
</body>

</html>